<template>
  <div class="app-container">
    <div class="editBtn">
      <el-button type="primary" icon="el-icon-plus" @click="add">新增评论</el-button>
    </div>
    <el-table
    :data="list"
    border
    style="width: 100%;margin-top:10px;">
    <el-table-column
      prop="id"
      label="ID">
    </el-table-column>
    <el-table-column
      prop="username"
      label="评论用户">
    </el-table-column>
    <el-table-column
      prop="replyname"
      label="回复用户">
    </el-table-column>
    <el-table-column
      prop="content"
      label="评论内容">
    </el-table-column>
    <el-table-column
      prop="rating"
      label="评级">
    </el-table-column>
    <el-table-column
      prop="time"
      label="评论时间">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="reply(scope.row)">回复</el-button>
        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="row">
  </el-pagination>
  <!-- 表单弹窗 -->
  <el-dialog :visible.sync="dialogVisible">
    <add-service @close="serviceClose" :formData="formData" :key="changeKey"></add-service>
  </el-dialog>
  </div>
</template>

<script>
import addService from './common/addService.vue'
export default {
    components: { addService },
    data() {
        return {
            list: null,
            page:1,
            row:10,
            total:10,
            dialogVisible:false,
            changeKey:0,
            formData:{}
        }
    },
  created() {
    this.fetchData()
  },
  methods: {
    add(){
      
    },
    async fetchData() {
        await this.$store.dispatch('comment/getList',{page:this.page,row:this.row,userId:sessionStorage.getItem('userId')}).then((res) => {
            if(res.data.length > 0){
                this.list = res.data
                this.list.forEach(item => {
                    item.time = this.changeTime(item.time)
                })
                this.total = res.total
            }
        }).catch(() => {
        })
    },
    changeTime(timestamp){
        const date = new Date(timestamp * 1000); // 注意：如果timestamp是秒级时间戳，需要乘以1000转换为毫秒级
        // 提取年月日时分秒
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并使用padStart补零
        const day = String(date.getDate()).padStart(2, '0'); // 使用padStart补零
        const hours = String(date.getHours()).padStart(2, '0'); // 使用padStart补零
        const minutes = String(date.getMinutes()).padStart(2, '0'); // 使用padStart补零
        const seconds = String(date.getSeconds()).padStart(2, '0'); // 使用padStart补零

        // 拼接成所需的格式
        let formattedDate
        formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        return formattedDate
    },
    serviceClose(data){
        this.dialogVisible = data
        this.fetchData()
    },
    reply(item){
      this.changeKey += 1
      this.formData = item
      this.dialogVisible = true
    },
    del(item){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
          this.$store.dispatch('comment/deleteComment', {id:item.id}).then((res) => {
            this.fetchData()
          }).catch(() => {
              // this.loading = false
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      });
    }
  }
}
</script>
